<template>
<!-- 首页的关注页面 -->
    <div class="attention">
        <Loading v-if="!lists"/>
        <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
            <!-- 下拉提示 -->
            <template #pulling>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>
            <!-- 释放提示 -->
            <template #loosing>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>

            <!-- 加载提示 -->
            <template #loading>
            <img class="pull" src="../assets/images/loading.gif" />
            </template>

            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
            <template #loading>
                <img class="pull" src="../assets/images/loading.gif" />
            </template>
                <div>
                    <ul class="note">
                        <!-- <Lists v-for="(list,index) in lists" :key="index" :list="list.r"/> -->
                        <li v-for="(list,index) in lists" :key="index" :list="list" @click="toDetail(list)">
                            <div class="top">
                                <ListsTop :list="list.u"/>
                                <div class="guanzhu">关注</div>
                            </div>
                            <ListsCenter :list="list"/>
                            <div class="attention_bottom">
                                <ListsBottom :list="list"/>
                            </div>
                            <ListsText :list="list"/>
                        </li>
                    </ul>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getAttentionList } from "@/apis/index";
import ListsTop from  "@/components/ListsTop.vue"
import ListsCenter from  "@/components/ListsCenter.vue"
import ListsText from  "@/components/ListsText.vue"
import Loading from  "@/components/Loading.vue"
import ListsBottom from  "@/components/ListsBottom.vue"
export default {
    name:'HomeAttention',
    components:{
        ListsTop,
        ListsCenter,
        // ListsBottomLeft,
        ListsText,
        Loading,
        ListsBottom
    },
    data: function(){
        return{
            lists: null,
            i: 0,
            loading: false,
            finished: false,
            refreshing: false,
            fav: false,
            recipe: null,
        }
    },
    created: async function () {
        this.lists = (await getAttentionList(0)).data.result.rfs;
    },
    methods: {
    ...mapMutations(["favoriteAdd"]),
    
        toDetail(list){
            this.$router.push({ path: '/menuDetail', query: { id: list.item_id }})
        },
//下拉加载数据
        onLoad: function(){
        // 异步更新数据
        if (this.refreshing) {
            this.lists = [];
            this.refreshing = false;
            this.i = this.i+1;
            }
            this.i ++;
            getAttentionList(this.i).then( res => {
            this.lists = [...this.lists, ...res.data.result.rfs];
            // 加载状态结束
            this.loading = false;
            // 数据全部加载完成
            if (this.i == 10) {
                this.finished = true;
            }
            })
        },
        onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        setTimeout(() => {
            this.onLoad();
        },1000);
    },
  },
}
</script>

<style lang="less" scoped>
.pull{
  margin: 0 auto;
  width: 100px;
}
    .note{
        li{
            margin: 10px 0;
            &:first-child{
                margin-top: 0px;
            }
        }
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .guanzhu{
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: orange;
                border-radius: 25px;
                font-size: 12px;
                font-weight: 550;
                margin-right: 10px;
            }
        }
    }
</style>